<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>截屏</title>

  <link rel="stylesheet" href="https://at.alicdn.com/t/font_2950820_w45wfnw49zm.css">

  <style>
    * {
      box-sizing: border-box;
    }

    html,
    body {
      margin: 0;
      padding: 0;
      font-family: PingFang SC, Lantinghei SC, Helvetica Neue, Helvetica, Arial, Microsoft YaHei, 微软雅黑, STHeitiSC-Light, simsun, 宋体, WenQuanYi Zen Hei, WenQuanYi Micro Hei, "sans-serif";
      overflow: hidden;
    }

    .bg {
      z-index: 1;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }

    .selection-mask {
      display: none;
      z-index: 2;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.4);
    }

    .selection-canvas {
      z-index: 3;
      position: absolute;
      display: none;
    }

    .selection-editor-wrapper {
      z-index: 4;
      position: absolute;
      display: none;
      background-repeat: no-repeat;
      background-size: 100%;
    }

    .selection-editor {}

    .selection-info {
      z-index: 10;
      position: absolute;
      color: #ffffff;
      font-size: 12px;
      white-space: nowrap;
      background: rgba(0, 0, 0, 0.8);
      padding: 5px 10px;
      border-radius: 2px;
      display: none;
    }

    .selection-toolbar {
      z-index: 10;
      position: absolute;
      color: #343434;
      font-size: 12px;
      background: #f5f5f5;
      height: 40px;
      padding: 0 10px;
      border-radius: 4px;
      display: none;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
      align-items: center;
    }

    .selection-toolbar .selection-toolbar-item {
      position: relative;
      padding: 0 8px;
      cursor: default;
    }

    .selection-toolbar .selection-toolbar-item .iconfont-screenshot {
      display: inline-block;
      transition: all .2s;
      word-break: keep-all;
      font-size: 21px;
    }

    .selection-toolbar .selection-toolbar-item .iconfont-screenshot.active,
    .selection-toolbar .selection-toolbar-item .iconfont-screenshot:hover {
      color: #E74F4F;
      transform: translateY(-1px);
      text-shadow: 0px 2px 0px rgba(0, 0, 0, .12);
    }

    .selection-toolbar .selection-toolbar-item.disabled .iconfont-screenshot {
      color: #ccc;
      transform: none;
      text-shadow: none;
    }

    .toolbar-item-settings {
      position: absolute;
      display: none;
      align-items: center;
      padding: 12px 20px;
      border-radius: 4px;
      background-color: rgba(0, 0, 0, .8);
    }

    .toolbar-item-settings .triangle {
      position: absolute;
      display: none;
      width: 0;
      height: 0;
      border-style: solid;
      border-color: rgba(0, 0, 0, .8);
    }

    .toolbar-item-settings .triangle-top {
      top: 0;
      transform: translateY(-100%);
      border-width: 0 5px 6px 5px;
      border-top-color: transparent;
      border-right-color: transparent;
      border-left-color: transparent;
    }

    .toolbar-item-settings .triangle-bottom {
      bottom: 0;
      transform: translateY(100%);
      border-width: 6px 5px 0 5px;
      border-right-color: transparent;
      border-bottom-color: transparent;
      border-left-color: transparent;
    }

    .toolbar-item-settings .stroke-width {
      display: flex;
      align-items: center;
    }

    .toolbar-item-settings .stroke-width span {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 16px;
      height: 16px;
    }

    .toolbar-item-settings .stroke-width span:nth-child(2) {
      margin: 0 14px 0 12px;
    }

    .toolbar-item-settings .stroke-width span::after {
      content: "";
      display: block;
      background-color: grey;
      border-radius: 50%;
    }

    .toolbar-item-settings .stroke-width span.active::after {
      background-color: white;
    }

    .toolbar-item-settings .stroke-width span:nth-child(1)::after {
      width: 4px;
      height: 4px;
    }

    .toolbar-item-settings .stroke-width span:nth-child(2)::after {
      width: 10px;
      height: 10px;
    }

    .toolbar-item-settings .stroke-width span:nth-child(3)::after {
      width: 14px;
      height: 14px;
    }

    .toolbar-item-settings .stroke-color {
      display: flex;
      margin-left: 20px;
    }

    .toolbar-item-settings .stroke-color span {
      margin-left: 7px;
      width: 16px;
      height: 16px;
      border-radius: 2px;
    }

    .toolbar-item-settings .stroke-color span:first-child {
      margin-left: 0;
    }

    .toolbar-item-settings .stroke-color .active {
      border: 1px solid white;
    }

    .toolbar-item-settings .stroke-color .red {
      background-color: red;
    }

    .toolbar-item-settings .stroke-color .blue {
      background-color: dodgerblue;
    }

    .toolbar-item-settings .stroke-color .green {
      background-color: limegreen;
    }

    .toolbar-item-settings .stroke-color .yellow {
      background-color: gold;
    }

    .toolbar-item-settings .stroke-color .gray {
      background-color: gray;
    }

    .toolbar-item-settings .stroke-color .white {
      background-color: white;
    }

    .toolbar-item-settings .font-size select {
      width: 60px;
      margin-right: 5px;
    }

    /* 分隔符 */
    .selection-toolbar-seperator {
      width: 1px;
      height: 20px;
      margin: 0 10px;
      background-color: #ddd;
    }

    .cursor-info {
      z-index: 10;
      position: absolute;
      display: none;
      width: 100px;
      height: 100px;
      border: 1px solid #333;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
    }

    .cursor-cross-horizon {
      position: absolute;
      top: 50%;
      left: 1px;
      right: 1px;
      height: 1px;
      background-color: lawngreen;
    }

    .cursor-cross-vertical {
      position: absolute;
      left: 50%;
      top: 1px;
      bottom: 1px;
      width: 1px;
      background-color: lawngreen;
    }

    .cursor-info-details {
      position: absolute;
      bottom: 0;
      transform: translateY(100%);
      width: 100%;
      background-color: rgba(0, 0, 0, .8);
      font-size: 10px;
      text-align: center;
      color: white;
    }
  </style>
</head>

<body>

  <!-- 截屏底图 -->
  <img id="J_Background" class="bg" />
  <!-- 截屏遮罩 -->
  <div id="J_SelectionMask" class="selection-mask"></div>
  <!-- 选区画布: 初始画布 -->
  <canvas id="J_SelectionCanvas" class="selection-canvas"></canvas>
  <!-- 编辑画布: 固定绘制区域, 当且仅当选择绘制工具后出现, 同时隐藏初始画布 -->
  <div class="selection-editor-wrapper" id="J_SelectionEditorWrapper">
    <canvas id="J_SelectionEditor" class="selection-editor"></canvas>
  </div>
  <!-- 选区信息 -->
  <div id="J_SelectionInfo" class="selection-info"></div>
  <!-- 选区工具条 -->
  <div id="J_SelectionToolbar" class="selection-toolbar">
    <!-- 矩形工具 -->
    <div class="selection-toolbar-item">
      <i id="J_SelectionRect" data-icon="RECT"
        class="J_ToolbarItemIcon iconfont-screenshot icon-screenshot-rectangle"></i>
      <div class="toolbar-item-settings J_ToolbarItemSettings" data-type="RECT">
        <div class="triangle triangle-top"></div>
        <div class="triangle triangle-bottom"></div>
        <div class="stroke-width J_StrokeWidth">
          <span class="active" data-width="4"></span>
          <span data-width="8"></span>
          <span data-width="14"></span>
        </div>
        <div class="stroke-color J_StrokeColor">
          <span class="active" data-color="red"></span>
          <span data-color="dodgerblue"></span>
          <span data-color="limegreen"></span>
          <span data-color="gold"></span>
          <span data-color="gray"></span>
          <span data-color="white"></span>
        </div>
      </div>
    </div>
    <!-- 椭圆工具 -->
    <div class="selection-toolbar-item">
      <i id="J_SelectionEllipse" data-icon="ELLIPSE"
        class="J_ToolbarItemIcon iconfont-screenshot icon-screenshot-circular"></i>
      <div class="toolbar-item-settings J_ToolbarItemSettings" data-type="ELLIPSE">
        <div class="triangle triangle-top"></div>
        <div class="triangle triangle-bottom"></div>
        <div class="stroke-width J_StrokeWidth">
          <span class="active" data-width="4"></span>
          <span data-width="8"></span>
          <span data-width="14"></span>
        </div>
        <div class="stroke-color J_StrokeColor">
          <span class="active" data-color="red"></span>
          <span data-color="dodgerblue"></span>
          <span data-color="limegreen"></span>
          <span data-color="gold"></span>
          <span data-color="gray"></span>
          <span data-color="white"></span>
        </div>
      </div>
    </div>
    <!-- 箭头工具 -->
    <div class="selection-toolbar-item">
      <i id="J_SelectionArrow" data-icon="ARROW"
        class="J_ToolbarItemIcon iconfont-screenshot icon-screenshot-point"></i>
      <div class="toolbar-item-settings J_ToolbarItemSettings" data-type="ARROW">
        <div class="triangle triangle-top"></div>
        <div class="triangle triangle-bottom"></div>
        <div class="stroke-width J_StrokeWidth">
          <span class="active" data-width="4" data-size="sm"></span>
          <span data-width="8" data-size="md"></span>
          <span data-width="14" data-size="lg"></span>
        </div>
        <div class="stroke-color J_StrokeColor">
          <span class="active" data-color="red"></span>
          <span data-color="dodgerblue"></span>
          <span data-color="limegreen"></span>
          <span data-color="gold"></span>
          <span data-color="gray"></span>
          <span data-color="white"></span>
        </div>
      </div>
    </div>
    <!-- 画笔工具 -->
    <div class="selection-toolbar-item">
      <i id="J_SelectionBrush" data-icon="BRUSH"
        class="J_ToolbarItemIcon iconfont-screenshot icon-screenshot-pencil"></i>
      <div class="toolbar-item-settings J_ToolbarItemSettings" data-type="BRUSH">
        <div class="triangle triangle-top"></div>
        <div class="triangle triangle-bottom"></div>
        <div class="stroke-width J_StrokeWidth">
          <span class="active" data-width="2"></span>
          <span data-width="4"></span>
          <span data-width="8"></span>
        </div>
        <div class="stroke-color J_StrokeColor">
          <span class="active" data-color="red"></span>
          <span data-color="dodgerblue"></span>
          <span data-color="limegreen"></span>
          <span data-color="gold"></span>
          <span data-color="gray"></span>
          <span data-color="white"></span>
        </div>
      </div>
    </div>
    <!-- 马赛克工具 -->
    <div class="selection-toolbar-item">
      <i id="J_SelectionMosaic" data-icon="MOSAIC"
        class="J_ToolbarItemIcon iconfont-screenshot icon-screenshot-mosaic"></i>
      <div class="toolbar-item-settings J_ToolbarItemSettings" data-type="MOSAIC">
        <div class="triangle triangle-top"></div>
        <div class="triangle triangle-bottom"></div>
        <div class="stroke-width J_StrokeWidth">
          <span class="active" data-width="8"></span>
          <span data-width="16"></span>
          <span data-width="32"></span>
        </div>
      </div>
    </div>
    <!-- 文本工具 -->
    <div class="selection-toolbar-item">
      <i id="J_SelectionText" data-icon="TEXT" class="J_ToolbarItemIcon iconfont-screenshot icon-screenshot-text"></i>
      <div class="toolbar-item-settings J_ToolbarItemSettings" data-type="TEXT">
        <div class="triangle triangle-top"></div>
        <div class="triangle triangle-bottom"></div>
        <div class="font-size J_FontSize">
          <select name="fontSizeSelect" id="J_FontSizeSelect">
            <option value="24">小</option>
            <option value="30" selected>中</option>
            <option value="36">大</option>
          </select>
        </div>
        <div class="stroke-color J_StrokeColor">
          <span class="active" data-color="red"></span>
          <span data-color="dodgerblue"></span>
          <span data-color="limegreen"></span>
          <span data-color="gold"></span>
          <span data-color="gray"></span>
          <span data-color="white"></span>
        </div>
      </div>
    </div>

    <div class="selection-toolbar-seperator"></div>

    <!-- 撤销到上一步 -->
    <div id="J_SelectionUndo" class="selection-toolbar-item disabled">
      <i class="iconfont-screenshot icon-screenshot-return"></i>
    </div>
    <!-- 选区重置 -->
    <!-- <div id="J_SelectionReset" class="selection-toolbar-item">
      <i class="iconfont-screenshot es-refresh"></i>
    </div> -->
    <!-- 截图下载 -->
    <div id="J_SelectionDownload" class="selection-toolbar-item">
      <i class="iconfont-screenshot icon-screenshot-download"></i>
    </div>
    <!-- 取消 -->
    <div id="J_SelectionCancel" class="selection-toolbar-item">
      <i class="iconfont-screenshot icon-screenshot-del"></i>
    </div>
    <!-- 复制到剪切板 -->
    <div id="J_SelectionConfirm" class="selection-toolbar-item">
      <i class="iconfont-screenshot icon-screenshot-sure"></i>
    </div>
  </div>
  <!-- 鼠标处信息: 拾色器, 放大器, etc. -->
  <div id="J_CursorInfo" class="cursor-info">
    <!-- 中心交叉线 -->
    <div class="cursor-cross-horizon"></div>
    <div class="cursor-cross-vertical"></div>
    <div class="cursor-info-details">
      <div id="J_CursorCoords"></div>
      <div id="J_CursorColor"></div>
    </div>
  </div>


  <script src="./screenshot-renderer.js"></script>
</body>

</html>